{extend name="template/base" /}
{block name="content"}
<!--select2样式 start -->
<link href="__LIB__/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" />
<!--select2样式 end -->
<link rel="stylesheet" href="/static/admin/layui-xia/css/layui.css" media="all"/>
<link rel="stylesheet" href="/static/admin/formSelects/dist/formSelects-v4.css">
<script type="text/javascript" src="/static/admin/layui-xia/layui.js"></script>
<div class="page-container">
    {php} use think\Db; {/php}
    <br><br><br>
    <!--<form class="form form-horizontal" id="form" onsubmit="return false" method="post" action="###">-->
    <!--<input type="hidden" name="groupIds" id="groupIds" value="">-->
    <!--<table class="table table-border table-bordered">-->
    <!--<tr>-->
    <!--<th style="text-align: center;width: 30px"></th>-->
    <!--<th style="text-align: center">线路名称</th>-->
    <!--<th style="text-align: center">姓名</th>-->
    <!--<th style="text-align: center">性别</th>-->
    <!--<th style="text-align: center">年龄</th>-->
    <!--<th style="text-align: center">电话</th>-->
    <!--<th style="text-align: center">身份证号</th>-->
    <!--<th style="text-align: center">客人数量</th>-->
    <!--<th style="text-align: center">住宿</th>-->
    <!--<th style="text-align: center">住宿备注</th>-->
    <!--</tr>-->
    <!--&lt;!&ndash;使用ajax刷新&ndash;&gt;-->

    <!--<tr>-->
    <!--<td colspan="7" style="text-align: center">-->
    <!--<input class="btn btn-primary size-M radius" type="submit" id="add_group1" value="确认组合" onclick="submitGroup()">-->
    <!--</td>-->
    <!--</tr>-->
    <!--</table>-->
    <!--</form>-->

    <!--分配住宿-->
    <form class="form form-horizontal" id="form1" onsubmit="return false" method="post" action="###">
        <input type="hidden" name="portionId" id="portion_id" value="{$id}">
        <input type="hidden" name="group_id" id="group_id" value="{$group_id}">
        <input type="hidden" name="order" value="{$order}">
        <table class="table table-border table-bordered">
            <tr id="#add_tr">
                <th style="text-align: center">ID</th>
                <th style="text-align: center">线路名称</th>
                <th style="text-align: center">司机姓名</th>
                <th style="text-align: center">分组id</th>
                <th style="text-align: center">组合姓名</th>
                <th style="text-align: center">住宿备注</th>
                <th style="text-align: center">入住日期</th>
                <th style="text-align: center">退房日期</th>
                <th style="text-align: center">酒店名称</th>
                <th style="text-align: center">酒店房型</th>
                <th style="text-align: center">操作</th>
            </tr>
            <!--使用ajax刷新-->
        </table>
        <div class="row cl">
            <div style="text-align: center">
                <input class="btn btn-primary size-M radius" id="btn01" type="submit" value="拼房完成发送给司机" onclick="submitTraveller()">
            </div>
        </div>
    </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>
<!--select2 js 插件-->
<script type="text/javascript" src="__LIB__/select2-4.0.3/dist/js/select2.min.js"></script>
<style>
    element .style {
        width: 100px;
    }
    .shang{
        position: relative;
        top: -2px;
    }
    .jian{
        position: relative;
        top: 2px;
    }
</style>
<script>
    // 获取派单旅客住宿信息
    $(function () {
        // 输出当前的派单id
        // console.log('派单id', $('#portion_id').val())
        var portionId = $('#portion_id').val();
        if (!portionId){
            layer.msg('缺少重要的参数');
            return false;
        }
        $.ajax({
            type: 'POST',
            url: '/admin/hotel_accommodation/deals',
            data: {id: portionId},
            success: function (ret) {
                console.log('ret', ret)
                if (ret.code == 1){
                    layer.msg(ret.msg);
                    return false;
                } else {
                    var hotelAccommodation = ret.data.hotelAccommodation; // 酒店旅客信息列表
                    var hotelLength = hotelAccommodation.length;
                    var hotelData = ret.data.hotel; // 获取酒店列表
                    var hotelLen = hotelData.length; // 获取酒店长度
                    if (hotelLength) {
                        var jishu = 1;
                        for (var j = 0;j < hotelLength; j++) {
                            $.each($('#form1 tbody tr'), function (i, tr) {
                                if ($(this).attr('id') == '#add_tr'){
                                    // 获取当前行
                                    var currentRow = $('#form1 tbody tr:eq('+i+')');
                                    var addId = GenNonDuplicateID(6);
                                    var hotelId = 'hotel_id'+ addId;
                                    var roomTypeId = 'room_type' + addId;
                                    var temp_show = false
                                    var group_id = $('#group_id').val();
                                    if(hotelAccommodation[j].id == group_id){
                                        temp_show = true;
                                    }
                                    console.log(j+'temp_show',temp_show)
                                    // 追加tr
                                    if(temp_show){
                                        currentRow.after('<tr style="background-color: #EFEFEF"><input type="hidden" name="groupIds[]" value="'+hotelAccommodation[j].group_id+'"/>' +
                                            '<input type="hidden" name="ids[]" value="'+hotelAccommodation[j].id+'"/>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].id+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].route_name+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].realname+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].group_id+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].name+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].remark+'</td>' +
                                            '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="'+hotelAccommodation[j].check_in_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                            '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="'+hotelAccommodation[j].end_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                            '<td style="text-align: center">' +
                                            '<select  name="hotel_id[]" class="select2 hotel_id" id="'+hotelId+'" onchange="getRoomTypeList(this[selectedIndex].value, \''+roomTypeId+'\')">' +
                                            '<option value="">选择酒店</option>' +
                                            '</select>' +
                                            '</td>' +
                                            '<td style="text-align: center">' +
                                            '<select  name="room_type_id[]" class="select2 room_type" id="' + roomTypeId + '">' +
                                            '<option value="">请选择房型</option>' +
                                            '</select>' +
                                            '</td>' +
                                            '<td style="text-align: center">' +
                                            '<a href="javascript:;" onclick="increase(this,'+hotelAccommodation[j].id+')" class="btn btn-primary radius \tsize-MINI mr-5"><i class="Hui-iconfont">&#xe604;</i> 添加</a>'+
                                            '</td>' +
                                            '</tr>');
                                    }else{
                                        currentRow.after('<tr><input type="hidden" name="groupIds[]" value="'+hotelAccommodation[j].group_id+'"/>' +
                                            '<input type="hidden" name="ids[]" value="'+hotelAccommodation[j].id+'"/>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].id+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].route_name+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].realname+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].group_id+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].name+'</td>' +
                                            '<td style="text-align: center">'+hotelAccommodation[j].remark+'</td>' +
                                            '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="入住日期" disabled="'+temp_show+'" name="check_in_date[]" value="'+hotelAccommodation[j].check_in_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} >' +
                                            '<input type="hidden" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="'+hotelAccommodation[j].check_in_date+'"></td>' +
                                            '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="退房日期" disabled="'+temp_show+'" name="end_date[]" value="'+hotelAccommodation[j].end_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} >' +
                                            '<input type="hidden" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="'+hotelAccommodation[j].end_date+'"></td>' +
                                            '<td style="text-align: center">' +
                                            '<select class="select2 hotel_id" id="'+hotelId+'" disabled="'+temp_show+'" onchange="getRoomTypeList(this[selectedIndex].value, \''+roomTypeId+'\')">' +
                                            '<option value="">选择酒店</option>' +
                                            '</select>' +
                                            '<select  name="hotel_id[]" style="display: none" class="select2 hotel_id" id="hotelId'+hotelId+'">' +
                                            '<option value="">选择酒店</option>' +
                                            '</select>' +
                                            '</td>' +
                                            '<td style="text-align: center">' +
                                            '<select class="select2 room_type" disabled="'+temp_show+'" id="' + roomTypeId + '">' +
                                            '<option value="">请选择房型</option>' +
                                            '</select>' +
                                            '<select  name="room_type_id[]" style="display: none" class="select2 room_type" id="room_type_id'+roomTypeId+'">' +
                                            '<option value="">请选择房型</option>' +
                                            '</select>' +
                                            '</td>' +
                                            '<td style="text-align: center">' +
                                            '</td>' +
                                            '</tr>');
                                    }

                                    // 追加酒店列表
                                    if (hotelLen){
                                        $(hotelId).empty();// 清空选项
                                        for(var k=0; k < hotelLen; k++){
                                            $('#' + hotelId).append("<option value='"+hotelData[k].id+"'>"+hotelData[k].hotel_name+"</option>");
                                            $("#" + hotelId).val(hotelAccommodation[j].hotel_id);
                                            $("#hotelId" + hotelId).val(hotelAccommodation[j].hotel_id);
                                        }
                                    }
                                    $('#'+hotelId).select2({
                                        language: "zh-CN", //设置 提示语言
                                        width: "100%", //设置下拉框的宽度
                                        theme: "classic"
                                    });
                                    // 获取酒店房型
                                    var roomType = hotelAccommodation[j].hotel_room_type
                                    $.ajax({
                                        type: 'POST',
                                        url: '/admin/portion_traveler/getRoomType',
                                        data: {hotel_id: hotelAccommodation[j].hotel_id},
                                        success: function (ret) {
                                            if (ret.code == 1){
                                                layer.msg(ret.msg);
                                                return false;
                                            }else{
                                                // 获取数据成功
                                                var data = ret.data;
                                                // console.log('获取到的房型', data)
                                                var len = data.length
                                                if (!len) {
                                                    // 没有房型
                                                    layer.msg('该酒店还没有添加房型')
                                                } else {
                                                    for (var ri = 0; ri < len; ri++) {
                                                        $('#' + roomTypeId).append("<option value='" + data[ri].room_type_id + "'>" + data[ri].room_type_name + "</option>")
                                                        $('#' + roomTypeId).val(roomType);
                                                        $('#room_type_id' + roomTypeId).val(roomType);
                                                    }
                                                }
                                            }
                                        }
                                    });
                                    $('#'+roomTypeId).select2({
                                        language: "zh-CN", //设置 提示语言
                                        width: "100%", //设置下拉框的宽度
                                        theme: "classic"
                                    });
                                }
                            });
                        }
                    }
                }
            }
        })
    });
</script>
<script>
    $(function () {

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });


        //room_type


        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //常规用法
            laydate.render({
                elem: '#test1'
            });
        })
    });
    // var index = parent.layer.getFrameIndex(window.name)
    // 获取酒店房型
    function get_hotel_room_type_list(val, room_type) {
        // console.log('你选择的是：', val)
        // console.log('获取的房型的类：', room_type);
        // console.log('获取的房型的类：', room_type.id);
        var id = '#' + room_type.id;
        if (room_type.length > 20) {
            room_type = id
        }
        var type_id = '#' + '' + room_type;
        // console.log('type_id', type_id)
        // console.log('room_type', id)
        // 清空房型
        $(id).empty()
        // 获取酒店的房型‘
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/getRoomType',
            data: {hotel_id: val},
            success: function (ret) {
                console.log('结果是', ret)
                if (ret.code == 1) {
                    layer.msg(ret.msg)
                } else if (ret.code == 5) {
                    // 获取数据成功
                    var data = ret.data;
                    var len = data.length
                    if (!len) {
                        // 没有房型
                        layer.msg('该酒店还没有添加房型')
                    } else {
                        for (var i = 0; i < len; i++) {
                            $(id).append("<option value='" + data[i].room_type_id + "'>" + data[i].room_type_name + "</option>")
                            $(id + ' option:eq(0)').attr('selected', 'selected');//选中第一个
                        }
                    }
                }
            }
        });
    }

    // 取消组合
    function ungroup(obj,val) {
        console.log('取消组合', val)
        console.log('当前对象', obj)
        // 获取取消的tr
        var trClass = $(obj).parent().parent().attr('id');
        // 把当前组合删除
        $(obj).parent().parent().remove();
        // 把添加的子行删除
        console.log('类为：', trClass)
        var trClassArr = trClass.split('');
        trClass = trClassArr.slice(1);
        trClass = trClass.join('');
        $('.' + trClass).remove();
        // 再加进上面的组合
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/getTraveller',
            data: {id: val},
            success: function (ret) {
                console.log('结果', ret)
                if (ret.code == 6) {
                    layer.msg(ret.msg);
                    return false;
                }else if(ret.code == 5){
                    layer.msg(ret.msg);
                    // 获取要取消的id
                    var cancelIds = ret.data.id;
                    if (cancelIds){
                        cancelIds = cancelIds.split(',');
                    }else{
                        cancelIds = '';
                    }
                    // 先把groupIds中的数据删除
                    var groupIdStr = $('#groupIds').val();
                    var arr = []; // 去除多余的数组
                    if (groupIdStr){
                        groupIdStr = groupIdStr.split(',');
                        arr = groupIdStr.concat(cancelIds).filter(function (v, i, arr) {
                            return arr.indexOf(v) === arr.lastIndexOf(v);
                        })
                        // console.log('多出的元素', arr)
                        // 数组转换成字符串
                        // console.log('ddddd', arr.join(','));
                        // 更新groupIds 中的值
                        $('#groupIds').val(arr.join(','));
                    }
                    console.log('groupIdStr', groupIdStr);
                    // 先删除最后一个按钮
                    $('#form').find("tr:last").remove();
                    // 获取当前tr元素的个数
                    var trLen = $('#form tr').length;
                    if (!trLen){
                        // 添加表头
                        $("#form tbody").prepend('<tr><th style="text-align: center;width: 30px"></th>' +
                            '<th style="text-align: center">线路名称</th>' +
                            '<th style="text-align: center">姓名</th>' +
                            '<th style="text-align: center">性别</th>' +
                            '<th style="text-align: center">年龄</th>' +
                            '<th style="text-align: center">电话</th>' +
                            '<th style="text-align: center">身份证号码</th>' +
                            '<th style="text-align: center">客人数量</th>' +
                            '<th style="text-align: center">住宿</th>' +
                            '<th style="text-align: center">住宿备注</th></tr>');
                    }
                    // 把取消的组合添加回去
                    var len = ret.data.info.length;
                    console.log('信息的长度', len)
                    for (var i = 0; i < len; i++) {
                        $('#form tbody').append('<tr>' +
                            '<input type="hidden" name="group_id[]" value="'+ret.data.info[i].group_id+'">' +
                            '<td  style="text-align: center"><input type="checkbox" name="user_id[]" value="'+ret.data.info[i].id+'"></td>' +
                            '<td style="text-align: center">'+ret.data.info[i].route_name+'</td>' +
                            '<td style="text-align: center">'+ret.data.info[i].name+'</td>' +
                            '<td style="text-align: center">'+ret.data.info[i].sex+'</td>' +
                            '<td style="text-align: center">'+ret.data.info[i].age+'</td>' +
                            '<td style="text-align: center">'+ret.data.info[i].phone+'</td>' +
                            '<td style="text-align: center">'+ret.data.info[i].id_card+'</td>' +
                            '<td style="text-align: center">'+ret.data.count+'</td>' +
                            '<td style="text-align: center">'+ret.data.info[i].isaccommodation+'</td>' +
                            '<td style="text-align: center">'+ret.data.info[i].remark+'</td>' +
                            '</tr>');
                    }
                    // 最后把确认组合按钮添加回去
                    $('#form tbody').append('<tr>' +
                        '<td colspan="7" style="text-align: center">' +
                        '<input class="btn btn-primary size-M radius" type="submit"  id="add_group1" value="确认组合" onclick="submitGroup()">' +
                        '</td>' +
                        '</tr>');
                }
            }
        });
    }

    // 提交旅客住宿信息表单
    function submitTraveller() {
        console.log('你提交的数据', $('#form1').serializeArray())
        var data = $('#form1').serialize()
        $('#btn01').attr('disabled',true);
        $.ajax({
            type: 'post',
            url: '/admin/hotel_accommodation/editTraveller',
            data: data,
            success: function (ret) {
                console.log('提交的数据', ret);
                if (ret.code) {
                    layer.msg(ret.msg)
                    $('#btn01').attr('disabled',false);
                    return false;
                }else{
                    layer.msg(ret.msg, {
                        time: 2000,
                    },function () {
                        var index = parent.layer.getFrameIndex(window.name); // 获取当前弹出层的层级
                        window.parent.location.reload(); // 刷新父页面
                        parent.layer.close(index); // 关闭弹窗页
                    });
                }
            }
        })
    }

    // 确认组合
    function submitGroup() {
        console.log('选择的组合数据是：', $('#form').serializeArray())
        var data = $('#form').serializeArray();
        // 按钮变灰
        $('#add_group1').attr('disabled','true');
        // 提交数据
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/addGroup',
            data: data,
            success: function (ret) {
                console.log('提交的结果', ret)
                if (ret.code == 5) {
                    layer.msg('组合成功');
                    console.log('组合的数据', ret.data.group.route_id)
                    console.log('酒店的数据', ret.data.hotel)
                    if (ret.data.group) {
                        // 添加合并后的旅客的数据
                        var trLength = $('#form1 tr').length; // 获取#allot下有几个tr
                        // 随机字符串
                        var str = 'a|b|c|d|e|f|g|h|i|j|k|l|m|n|o|p|q|r|s|t|u|v|w|x|y|z|1|2|3|4|5|6|7|8|9'
                        // 获取打乱的字符串数组
                        var strArr = str.split('|').sort(function () {
                            return Math.random() - 0.5
                        });
                        var randomStr = '';
                        if (!randomStr) {
                            for (var i = 0; i < 5; i++) {
                                randomStr += strArr[i] + ''
                            }
                        }
                        randomStr = randomStr + (trLength + 1); // 作为房型的id
                        console.log('randomStr', randomStr)
                        var hotel_room_type_id = 'room_type' + randomStr;
                        var hotel_ids = 'hotel' + randomStr;
                        // 删除表的最后一行tr
                        $("#form1").find("tr:last").remove();
                        // 获取酒店的列表
                        var id = ret.data.group.order_travel_ids;
                        console.log('id数组', id.split(','));
                        id = id.split(',');
                        var idLen = id.length;
                        var idStr = '';
                        if (idLen) {
                            for (var i = 0;i < idLen;i++){
                                if (idStr){
                                    idStr = parseInt(idStr) + parseInt(id[i]);
                                }else{
                                    idStr = id[i];
                                }
                            }
                        }
                        var passengerId = "#" + idStr + 'lvke' + GenNonDuplicateID(6);
                        console.log('获取随机的id', passengerId)
                        // 添加行
                        $("#form1 tbody").append('<tr id="'+passengerId+'"><input type="hidden" name="group_id[]" value="' + ret.data.group.group_id + '">' +
                            '<input type="hidden" name="order_travel_ids[]" value="' + ret.data.group.order_travel_ids + '">' +
                            '<td style="text-align: center">' + ret.data.group.route_id + '</td>' +
                            '<td style="text-align: center">' + ret.data.group.combine_name + '</td>' +
                            '<td style="text-align: center">' + ret.data.group.remark + '</td>' +
                            '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="{$Request.param.check_in_date}" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                            '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:250px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="{$Request.param.end_date}" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                            '<td style="text-align: center;width: 180px">' +
                            '<select name="hotel_id[]" class="select2 hotel_id" id="' + hotel_ids + '" onchange="get_hotel_room_type_list(this[selectedIndex].value,' + hotel_room_type_id + ')">' +
                            '<option value="">选择酒店</option>' +
                            '</select>' +
                            '</td>' +
                            '<td style="text-align: center;width: 180px"">' +
                            '<select name="room_type_id[]" class="select2 room_type" id="' + hotel_room_type_id + '" >' +
                            '<option value="">选择房型</option>' +
                            '</select>' +
                            '</td>' +
                            '<td style="text-align: center;">' +
                            '<a href="javascript:;" onclick="ungroup(this, \''+ret.data.group.order_travel_ids+'\')" class="btn btn-warning radius \tsize-MINI mr-5 shang"><i class="Hui-iconfont">&#xe631;</i> 取消组合</a>' +
                            '<a href="javascript:;" onclick="increase(this, \''+ret.data.group.order_travel_ids+'\',\''+passengerId+'\')" class="btn btn-primary radius \tsize-MINI mr-5"><i class="Hui-iconfont">&#xe604;</i> 添加</a>' +
                            '</td>' +
                            '</tr>');
                        // 追加酒店列表
                        var hotelData = ret.data.hotel;
                        var hotelLen = hotelData.length;
                        console.log('长度', hotelLen)
                        if (hotelLen) {
                            for (var hi = 0; hi < hotelLen; hi++) {
                                $('#' + hotel_ids).append('<option value="' + hotelData[hi].id + '">' + hotelData[hi].hotel_name + '</option>');
                            }
                        }
                        // 把最后一行添加回来
                        $('#form1 tbody').append('<tr style="text-align: center"><td colspan="8" style="text-align: center">' +
                            '<input class="btn btn-primary size-M radius" id="btn01" type="submit" value="拼房完成发送给司机" onclick="submitTraveller()">' +
                            '</td>' +
                            '</tr>');
                        //
                        $('#'+hotel_ids).select2({
                            language: "zh-CN", //设置 提示语言
                            width: "100%", //设置下拉框的宽度
                            theme: "classic"
                        });
                        $('#'+hotel_room_type_id).select2({
                            language: "zh-CN", //设置 提示语言
                            width: "100%", //设置下拉框的宽度
                            theme: "classic"
                        });
                        // 获取已经组合的旅客id
                        var groupIds = $('#groupIds').val();
                        console.log('旅客的组合id', groupIds)
                        if (!groupIds){ // 不存在旅客的id
                            $('#groupIds').val(ret.data.group.order_travel_ids);
                        } else { // 已经有旅客组合
                            groupIds = groupIds + ',' + ret.data.group.order_travel_ids ;
                            $('#groupIds').val(groupIds);
                        }
                        // 把form中选择的旅客列表
                        console.log('旅客信息', ret.data.info)
                        var travelerLen = ret.data.info.length
                        console.log('dddd', travelerLen)
                        // 删除（第一个）的其他的tr元素
                        $('#form tr').remove();
                        if(travelerLen) {
                            // 添加表头
                            $("#form tbody").prepend('<tr><th style="text-align: center;width: 30px"></th>' +
                                '<th style="text-align: center">线路名称</th>' +
                                '<th style="text-align: center">姓名</th>' +
                                '<th style="text-align: center">性别</th>' +
                                '<th style="text-align: center">年龄</th>' +
                                '<th style="text-align: center">电话</th>' +
                                '<th style="text-align: center">身份证号</th>' +
                                '<th style="text-align: center">客人数量</th>' +
                                '<th style="text-align: center">住宿</th>' +
                                '<th style="text-align: center">住宿备注</th></tr>');
                            // 添加旅客
                            for (var j = 0; j < travelerLen; j++) {
                                $('#form tbody').append('<tr>' +
                                    '<input type="hidden" name="group_id[]" value="'+ret.data.info[j].group_id+'">' +
                                    '<td  style="text-align: center"><input type="checkbox" name="user_id[]" value="'+ret.data.info[j].id+'"></td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].route_name+'</td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].name+'</td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].sex+'</td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].age+'</td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].phone+'</td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].id_card+'</td>' +
                                    '<td style="text-align: center">'+ret.data.count+'</td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].isaccommodation+'</td>' +
                                    '<td style="text-align: center">'+ret.data.info[j].remark+'</td>' +
                                    '</tr>');
                            }
                            // 最后把确认组合按钮添加回去
                            $('#form tbody').append('<tr>' +
                                '<td colspan="7" style="text-align: center">' +
                                '<input class="btn btn-primary size-M radius" type="submit"  id="add_group1" value="确认组合" onclick="submitGroup()">' +
                                '</td>' +
                                '</tr>');
                        }
                    }
                }else if(ret.code == 1){
                    // console.log('结果', ret)
                    $('#add_group1').attr('disabled', false);
                    layer.msg(ret.msg);
                }
            }
        });
        setTimeout("$('#add_group1').remove('disabled')",5000); // 5秒后恢复显示
    }
</script>

<script>
    /**
     * 生成一个用不重复的ID
     */
    function GenNonDuplicateID(randomLength){
        return Number(Math.random().toString().substr(3,randomLength) + Date.now()).toString(36)
    }
    //GenNonDuplicateID()将生成 rfmipbs8ag0kgkcogc 类似的ID
    // console.log('随机字符串', GenNonDuplicateID(6));
</script>


<script>
    // 增加
    function increase(obj,is) {
        console.log(is);
        $.ajax({
            type: 'POST',
            url: '/admin/hotel_accommodation/increase',
            data: {id: is},
            success: function (ret) {
                console.log('ret', ret)
                if (ret.code == 1){
                    layer.msg(ret.msg);
                    return false;
                } else {
                    var hotelAccommodation = ret.data.hotelAccommodation; // 酒店旅客信息列表
                    var hotelLength = hotelAccommodation.length;
                    var hotelData = ret.data.hotel; // 获取酒店列表
                    var hotelLen = hotelData.length; // 获取酒店长度
                    if (hotelLength) {
                        var jishu = 1;
                        for (var j = 0;j < hotelLength; j++) {
                            $.each($('#form1 tbody tr'), function (i, tr) {
                                if ($(this).attr('id') == '#add_tr'){
                                    // 获取当前行
//                                    var currentRow = $(obj).parent().parent();
                                    var currentRow = $("table tr:last");
//                                    var currentRowlen = $(obj).parent().length;
//                                    console.log('currentRow',currentRow)
//                                    console.log('currentRowlen',currentRowlen)
                                    var addId = GenNonDuplicateID(6);
                                    var hotelId = 'hotel_id'+ addId;
                                    var roomTypeId = 'room_type' + addId;
                                    // 追加tr
                                    currentRow.after('<tr><input type="hidden" name="groupIds[]" value="'+hotelAccommodation[j].group_id+'"/>' +
                                        '<input type="hidden" name="tjid[]" value="'+hotelAccommodation[j].id+'"/>' +
                                        '<input type="hidden" name="ids[]" value=""/>' +
                                        '<td style="text-align: center"></td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].route_name+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].realname+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].group_id+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].name+'</td>' +
                                        '<td style="text-align: center">'+hotelAccommodation[j].remark+'</td>' +
                                        '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="入住日期" name="check_in_date[]" value="'+hotelAccommodation[j].check_in_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                        '<td style="text-align: center"><input type="text" class="input-text Wdate" style="width:180px" autocomplete="off" placeholder="退房日期" name="end_date[]" value="'+hotelAccommodation[j].end_date+'" {literal} onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})" {/literal} ></td>' +
                                        '<td style="text-align: center">' +
                                        '<select  name="hotel_id[]" class="select2 hotel_id" id="'+hotelId+'" onchange="getRoomTypeList(this[selectedIndex].value, \''+roomTypeId+'\')">' +
                                        '<option value="">选择酒店</option>' +
                                        '</select>' +
                                        '</td>' +
                                        '<td style="text-align: center">' +
                                        '<select  name="room_type_id[]" class="select2 room_type" id="' + roomTypeId + '">' +
                                        '<option value="">请选择房型</option>' +
                                        '</select>' +
                                        '</td>' +
                                        '<td style="text-align: center">' +
                                        '<a href="javascript:;" onclick="increase(this,'+hotelAccommodation[j].id+')" class="btn btn-primary radius \tsize-MINI mr-5"><i class="Hui-iconfont">&#xe604;</i> 添加</a>'+
                                        '<a href="javascript:;" onclick="reduce(this)" class="btn btn-secondary  radius \tsize-MINI mr-5"><i class="Hui-iconfont">&#xe6a1;</i> 减少</a>' +
                                        '</td>' +
                                        '</tr>');
                                    // 追加酒店列表
                                    if (hotelLen){
                                        $(hotelId).empty();// 清空选项
                                        for(var k=0; k < hotelLen; k++){
                                            $('#' + hotelId).append("<option value='"+hotelData[k].id+"'>"+hotelData[k].hotel_name+"</option>");
                                            $("#" + hotelId).val(hotelAccommodation[j].hotel_id);
                                        }
                                    }
                                    $('#'+hotelId).select2({
                                        language: "zh-CN", //设置 提示语言
                                        width: "100%", //设置下拉框的宽度
                                        theme: "classic"
                                    });
                                    // 获取酒店房型
                                    var roomType = hotelAccommodation[j].hotel_room_type
                                    $.ajax({
                                        type: 'POST',
                                        url: '/admin/portion_traveler/getRoomType',
                                        data: {hotel_id: hotelAccommodation[j].hotel_id},
                                        success: function (ret) {
                                            if (ret.code == 1){
                                                layer.msg(ret.msg);
                                                return false;
                                            }else{
                                                // 获取数据成功
                                                var data = ret.data;
                                                // console.log('获取到的房型', data)
                                                var len = data.length
                                                if (!len) {
                                                    // 没有房型
                                                    layer.msg('该酒店还没有添加房型')
                                                } else {
                                                    for (var ri = 0; ri < len; ri++) {
                                                        $('#' + roomTypeId).append("<option value='" + data[ri].room_type_id + "'>" + data[ri].room_type_name + "</option>")
                                                        $('#' + roomTypeId).val(roomType);
                                                    }
                                                }
                                            }
                                        }
                                    });
                                    $('#'+roomTypeId).select2({
                                        language: "zh-CN", //设置 提示语言
                                        width: "100%", //设置下拉框的宽度
                                        theme: "classic"
                                    });
                                }
                            });
                        }
                    }
                }
            }
        })
    }

    // 减少
    function reduce(obj) {
        layer.confirm('确定要删除当前分组?', {
            btn: ['确定','取消']
        }, function (index) {
            layer.close(index); // 关闭当前弹窗
            $(obj).parent().parent().remove(); // 删除当前行
        },function () {
            layer.msg('取消成功!');
        });
    }
</script>


<script>
    // 获取房型
    function getRoomTypeList(val, room_type_id) {
        if (!val){
            layer.msg('缺少必要参数');
            return false;
        }
        if (!room_type_id) {
            layer.msg('缺少房型');
            return false;
        }
        var id = room_type_id;
        // 清空房型
        $('#' + id).empty();
        // 获取酒店的房型‘
        $.ajax({
            type: 'post',
            url: '/admin/portion_traveler/getRoomType',
            data: {hotel_id: val},
            success: function (ret) {
                // console.log('结果是', ret)
                if (ret.code == 1) {
                    layer.msg(ret.msg)
                } else if (ret.code == 5) {
                    // 获取数据成功
                    var data = ret.data;
                    var len = data.length
                    if (!len) {
                        // 没有房型
                        layer.msg('该酒店还没有添加房型')
                    } else {
                        for (var i = 0; i < len; i++) {
                            $('#' + id).append("<option value='" + data[i].room_type_id + "'>" + data[i].room_type_name + "</option>")
                            $('#' + id + ' option:eq(0)').attr('selected', 'selected');//选中第一个
                        }
                    }
                }
            }
        });
    }
</script>


<script>

    //用户select2 js部分 end
    //用户select2 js部分 car_type_id
    var hotel_id = $(".hotel_id").select2({
        language: "zh-CN", //设置 提示语言
        width: "100%", //设置下拉框的宽度
        theme: "classic"
    });
    {notempty name = "vo['hotel_id']"}
    hotel_id.val("{$vo['hotel_id']}").trigger("change");
    {/notempty}
    //用户select2 js部分 end
    //用户select2 js部分 car_type_id
    var room_type = $(".room_type").select2({
        language: "zh-CN", //设置 提示语言
        width: "100%", //设置下拉框的宽度
        theme: "classic"
    });
    {notempty name = "vo['room_type_id']"}
    room_type.val("{$vo['room_type_id']}").trigger("change");
    {/notempty}
    //用户select2 js部分 end



</script>


{/block}
